<%@ page import="framework.common.ResponseVo" %>
<%@ page import="framework.util.controller.LoginController" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<jsp:include page="${request.contextPath}/static/include.jsp" flush="true" /> <!-- 引入系统框架的支持 -->

<html>
<head>
    <title>注册页面</title>
    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content=""/>
    <meta name="twitter:image" content=""/>
    <meta name="twitter:url" content=""/>
    <meta name="twitter:card" content=""/>

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="shortcut icon" href="favicon.ico">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/style.css">

    <script>
        layui.use(['layer'], function(){
            var layer = parent.layer === undefined ? layui.layer : top.layer;

            $("#sendVerificationCode").click(function () {
                $.post(__ctxPath + "/Login.do?method=sendVerificationCode", serializeObject($("#_form")), function(response){
                    let msg = response.data || response.msg;
                    layer.msg(msg);
                }, "json");
            });

            $("#register").click(function () {
                $.post(__ctxPath + "/Login.do?method=register", serializeObject($("#_form")), function(response){
                    if(response.code != <%=ResponseVo.SUSCCESS%>){
                        layer.msg(response.msg);
                    }else{
                        layer.msg("注册成功！三秒后自动跳转到登录页面！");
                        setTimeout(() => {
                           window.location = "login.jsp";
                        }, 3000);
                    }
                }, "json");
            });
        });
    </script>
</head>

<body class="style-3">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <ul class="menu">
                    <li><a href="login.jsp">登录</a></li>
                    <li class="active"><a href="register.jsp">注册</a></li>
                </ul>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-push-4">
                    <!-- Start Sign In Form -->
                    <form id="_form" onsubmit="false" class="fh5co-form animate-box" data-animate-effect="fadeInRight">
                        <div class="form-group">
                            <label>账号</label>
                            <input type="text" class="form-control" id="account" name="account" placeholder="请输入QQ邮箱" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label>验证码</label>
                            <input type="password" class="form-control" id="verificationCode" name="verificationCode" placeholder="请输入验证码" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <input type="button" value="发送验证码" id="sendVerificationCode" class="btn btn-primary"/>&nbsp;&nbsp;
                            <input type="button" value="注册" id="register" class="btn btn-primary"/>&nbsp;&nbsp;
                        </div>
                    </form>
                    <!-- END Sign In Form -->
                </div>
            </div>
        </div>
    </div>

    <!-- Modernizr JS -->
    <script src="js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Placeholder -->
    <script src="js/jquery.placeholder.min.js"></script>
    <!-- Waypoints -->
    <script src="js/jquery.waypoints.min.js"></script>
    <!-- Main JS -->
    <script src="js/main.js"></script>
</body>
</html>
